<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>博客后台登录</title>

<link rel="stylesheet" href="../../js/login_css_js/logins.css" />

<script src="../../js/jquery.min.js"></script>
<script src="../../js/login_css_js/jquery.leanModal.min.js"></script>
<script src="../../js/layui/layui.js"></script>
<script src="../../js/vue/axios.min.js"></script>
<script src="../../js/vue/vue.js"></script>
<style>
a, img {
	border: 0;
}

body {
	font: 14px/1.3 'Microsoft Yahei', '宋体';
	color: #999;
}

.text-flash {
	text-align: center;
	font-weight: 400;
}

/* 必要样式 */
.bumpy-char {
	position: relative;
}

#randoms {
	font-family: '楷体';
	color:#83ACDB;
	font-weight:bold;
	text-shadow: 2px 3px 2px #83ACDB;
	text-shadow: -3px -2px 0px #83ACDB;
}
/* .img{
	background-image: url("../../images/bg2.jpg");
} */
</style>
</head>

<body class="img">

	<div id="w">
		<div id="content">
			<h1 class="text-flash">Welcome to the login page!</h1>
			<p>JuThis login page is only open to the blog administrator.
				Please jump to other pages for browsing. Thank you for your
				cooperation.</p>
			<center>
				<a href="#loginmodal" class="flatbtn" id="modaltrigger">Administrator</a>
			</center>
		</div>
	</div>

	<div id="app">
		<div id="loginmodal" style="display: none;">
			<h1 class="zth-top-head text-flash">博客后台登录</h1>
			<form id="loginform" name="loginform" method="post"
				action="index.html">
				<label for="username">Username:</label> <input type="text"
					v-model="login_user_name" AUTOCOMPLETE="OFF" class="txtfield"
					tabindex="1" /> <label for="password">Password:</label> <input
					type="password" class="txtfield" v-model="login_password"
					tabindex="2" /> <label for="password">验证码:</label> <input
					type="text" AUTOCOMPLETE="OFF" 
					style="width: 60%; display: inline-block;" id="password"
					class="txtfield" v-model="verify" tabindex="3" /> <span
					@click="randoms"><input type="text" id="randoms"
					class="txtfield" style="width: 30%; display: inline-block;"
					disabled="disabled" :value="random" /></span>
				<div class="center">
					<input type="button" class="flatbtn-blu hidemodal" @click="submit"
						value="登录" tabindex="4" />
				</div>

			</form>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {

			$('#loginform').submit(function(e) {
				return false;
			});

			//弹出层调用语句
			$('#modaltrigger').leanModal({
				top : 110,
				overlay : 0.45,
				closeButton : ".hidemodal"
			});

		});
	</script>

	<script>
		new Vue(
				{

					el : "#app",
					data : {
						//获取跟获得账号
						login_user_name : "",
						//获取跟获得密码
						login_password : "",
						//存自己输入的验证码
						verify : "",
						//存生成的验证码
						random : ""
					},
					mounted : function() {
						this.randoms();
					},
					methods : {
						submit : function() {
							if (this.login_user_name != null
									&& this.login_user_name != '') {
								if (this.login_password != null
										&& this.login_password != '') {
									var thsi = this;
									if (thsi.verify != null
											&& thsi.verify != "") {
										if (thsi.verify == thsi.random) {
											axios
													.post(
															"/ssb/user/loginByNameAndPassword?login_user_name="
																	+ thsi.login_user_name
																	+ "&login_password="
																	+ thsi.login_password)
													.then(
															function(res) {
																console
																		.log(res.data);
																if (res.data != null
																		&& res.data != "") {
																	//location.href = "../after/main.html?admin_user_id="+ res.data.admin_user_id;
																	location.href = "load.html?id="
																			+ res.data.admin_user_id;
																} else {
																	this.login_user_name = "";
																	this.login_password = "";
																	this.verify = "";
																	alert("该账号被冻结或者账号密码有误");
																}
															},
															function(err) {
																console
																		.log(err);

															});
										} else {
											alert("请重新输入验证码");
											this.verify = "";
											//随机生产验证码
											this.randoms();
										}
									} else {
										alert("请输入验证码");
									}
								} else {
									alert("请输入密码！");
								}
							} else {
								alert("请输入账号！");
							}

						},

						randoms : function() {
							var s = "";
							for (var i = 0; i < 5; i++) {
								s += Math.ceil(Math.random() * 9) + "";
							}
							console.log(s);
							this.random = s;
						}

					}
				});
	</script>

	<script type="text/javascript"
		src="../../js/else/jquery.bumpytext.packed.js"></script>
	<script type="text/javascript" src="../../js/else/easying.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.text-flash').bumpyText();
		});
	</script>


</body>
</html>
